生命周期钩子

 1. 挂载阶段
 constructor 
 render 
 componentDidMount 
 2. 更新阶段   触发条件: 1. 父组件更新 2. setState  3. forceUpdate 

 render 
 componentDidUpdate

 3. 卸载阶段
 componentWillUnmount

组件通讯

 props 主要用于父组件给子组件传递数据  1. 自上而下, 2. 逐级传递

 context  1. 自上而下 2. 跨级传递
 使用: 
 1. 创建context对象 
 const context对象 = React.createContext(默认值) 不写Provider的时候,默认值生效. 并且要注意. 接收数据和传递数据要使用的context是同一个

 2. 在传递数据的组件中使用context对象.Provider包裹整个jsx结构
 class App extends React.Component {
     render(){
         return <context对象.Provider value={要传递的数据}>
                 <div></div>
             </context对象.Provider>
     }
 }

 3. 接收数据的组件有两种接收方式

 3.1 使用context对象.Consumer 

 class Son extends React.Component {
     render(){
         return <context对象.Consumer>{(data)=>{return <p></p>}}</context对象.Consumer>
     }
 }

 3.2 使用静态属性contextType
 class Son extends React.Component {
     static contextType = context对象
    render(){
        // this.context 拿到传过来的数据
        return <p></p>
    }
}

 pubsub-js 是一个第三方的js库 

 // 订阅, 返回值是当前定于的唯一标识符. 用于清除订阅
 const subId = PubSub.subscribe('话题', (话题, 数据)=>{

 })

 // 发布
 PubSub.publish('话题',数据)


 // 清除订阅

 PubSub.unsubscribe(订阅的id) // 清除指定订阅
 PubSub.unsubscribe(话题) // 清除指定话题的所有订阅
 PubSub.clearAllSubscriptions() // 清除所有订阅

 实际使用最多的形式: 

 组件挂载时订阅
 componentDidMount(){
    this.subId = PubSub.subscribe('话题', (话题, 数据)=>{

    })
 }

 组件卸载时清除指定订阅
 componentWillUnmount(){
     PubSub.unsubscribe(this.subId)
 }

性能优化 

1. 减轻state 根渲染无关的数据,不写在state里面 
2. 利用shouldComponentUpdate 减少组件渲染次数 
shouldComponentUpdate在更新阶段执行. 如果return true就是更新, return false就是不更新 
所以在shouldComponentUpdate中一般都是判断props或state的数据是否变化,如果变化则更新,否则不更新
3. 使用PuerComponent. 纯组件帮我们实现了shouldComponentUpdate,自动判断了所有的props和state数据. 但是react内部比较数据,都是浅层对比.所以为了避免代码出错,直接修改数据时,根据旧数据创建新数据
